<template>
    <div class="container">
        <div class="app-container">
            <template>
                <div class="container">
                    <div class="app-container">
                        <!-- 角色管理内容 -->
                        <div class="role-operate">
                            <el-button size="mini" type="primary" @click="showAdd">添加角色</el-button>
                        </div>
                        <!-- 放置table组件 -->
                        <el-table :data="tableList">
                            <!-- 放置列 -->
                            <el-table-column align="center" width="200" label="角色">
                                <template slot-scope="{row}">
                                    <div v-if="!row.isEdit">{{ row.name }}</div>
                                    <el-input v-else v-model="editForm.name" placeholder="角色"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" width="200" label="启用">
                                <template slot-scope="{row}">
                                    <div v-if="!row.isEdit">{{ row.state === 1 ? '已启用' : '未启用' }}</div>
                                    <el-switch
                                        v-else
                                        :active-value="1"
                                        :inactive-value="0"
                                        v-model="editForm.state"
                                        active-color="#2752FB"
                                        inactive-color="#DCDFE6">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="描述">
                                <template slot-scope="{row}">
                                    <div v-if="!row.isEdit">{{ row.description }}</div>
                                    <el-input type="textarea" v-else v-model="editForm.description"
                                              placeholder="描述"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="操作">
                                <template slot-scope="scope">
                                    <div v-if="!scope.row.isEdit">
                                        <el-button @click="permission(scope.row)" type="text" size="small">分配权限
                                        </el-button>
                                        <el-button @click="showEdit(scope.row)" type="text" size="small">编辑
                                        </el-button>
                                        <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                                    </div>
                                    <div v-else>
                                        <el-button size="small" @click="scope.row.isEdit = false">取消</el-button>
                                        <el-button type="primary" size="small" @click="edit(scope.row)">确定</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 放置分页组件 -->
                        <el-row type="flex" style="height:60px" align="middle" justify="end">
                            <!-- 放置分页组件 -->
                            <el-pagination
                                @current-change="currentChange"
                                @size-change="sizeChange"
                                background
                                :current-page="page"
                                layout="sizes, prev, pager, next"
                                :page-size="5"
                                :page-sizes="[5, 10, 20, 50]"
                                :total="total">
                            </el-pagination>
                        </el-row>
                    </div>
                </div>
            </template>
        </div>

        <el-dialog :visible.sync="showDialog" :before-close="close" width="35%" :title="isAdd ? '添加角色' : '分配权限'">
            <el-form v-if="isAdd" :model="addForm" ref="form" :rules="rules">
                <el-form-item label-width="80px" label="角色名称" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label-width="80px" label="启用" prop="state">
                    <el-switch
                        active-value="1"
                        inactive-value="0"
                        v-model="addForm.state"
                        active-color="#2752FB"
                        inactive-color="#DCDFE6">
                    </el-switch>
                </el-form-item>
                <el-form-item label-width="80px" label="角色描述" prop="description">
                    <el-input type="textarea" v-model="addForm.description"></el-input>
                </el-form-item>
                <el-form-item label-width="80px">
                    <el-button size="small" @click="close">取消</el-button>
                    <el-button type="primary" size="small" @click="submit">确定</el-button>
                </el-form-item>
            </el-form>

            <el-tree
                v-else
                check-strictly
                :data="permissionList"
                show-checkbox
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps">
            </el-tree>
            <el-row v-if="!isAdd">
                <el-button size="small" @click="close">取消</el-button>
                <el-button type="primary" size="small" @click="submitPermission">确定</el-button>
            </el-row>
        </el-dialog>
    </div>
</template>
<script>
import { addRole, getRole, editRole, getRoleList, delRole, editRolePermission } from '@/api/role'
import { getPermissionList } from '@/api/permission'

export default {
    name: 'Role',
    created () {
        this.render()
        this.getPermissionList()
    },
    data () {
        return {
            showDialog: false,
            isAdd: true,
            page: 1,
            pageSize: 5,
            total: 0,
            tableList: [],
            permissionList: [],
            addForm: {},
            editForm: {},
            rules: {
                name: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入角色描述', trigger: 'blur' }
                ]
            },
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            currentID: ''
        }
    },
    methods: {
        async render () {
            const res = await getRoleList({
                page: this.page,
                pagesize: this.pageSize
            })
            this.tableList = res.data.data.rows
            this.tableList.forEach(e => this.$set(e, 'isEdit', false))
            this.total = res.data.data.total
        },
        async getPermissionList () {
            const res = await getPermissionList()
            this.permissionList = this.arrToTree(res.data.data, 0)
        },
        async permission (row) {
            this.isAdd = false
            this.showDialog = true
            this.currentID = row.id
            const res = await getRole(row.id)
            this.$refs.tree.setCheckedKeys(res.data.data.permIds)
        },
        showEdit (row) {
            this.editForm = JSON.parse(JSON.stringify(row))
            row.isEdit = !row.isEdit
        },
        async edit (row) {
            row.isEdit = !row.isEdit
            const res = await editRole(this.editForm)
            if (res.data.success) {
                const i = this.tableList.findIndex(item => item.id === this.editForm.id)
                this.tableList.splice(i, 1, this.editForm)
            }
        },
        async del (row) {
            const res = await delRole(row.id)
            if (this.tableList.length === 1) this.page--
            if (res.data.success) await this.render()
        },
        showAdd () {
            this.isAdd = true
            this.showDialog = true
        },
        close () {
            this.$refs.tree.setCheckedKeys([])
            this.showDialog = false
            if (this.isAdd) {
                this.addForm = {}
                this.$refs.form.resetFields()
            }
        },
        submit () {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    await addRole(this.addForm)
                    this.addForm = {}
                    this.showDialog = false
                    this.page = Math.ceil(this.total / this.pageSize)
                    await this.render()
                }
            })
        },
        async submitPermission() {
            const res = await editRolePermission({
                id: this.currentID,
                permIds: this.$refs.tree.getCheckedKeys()
            })
            console.log(res)
            if (res.data.success) this.close()
        },
        currentChange (e) {
            this.page = e
            this.render()
        },
        sizeChange (e) {
            this.pageSize = e
            this.page = 1
            this.render()
        },
        arrToTree (arr, id) {
            const tree = []
            arr.forEach(e => {
                if (e.pid === id) {
                    e.children = this.arrToTree(arr, e.id)
                    tree.push(e)
                }
            })
            return tree
        },
    }
}
</script>

<style scoped>
.role-operate {
    padding: 10px;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #2752FB;
    border-color: #2752FB;
}

.el-row {
    margin-top: 20px;
}
</style>
